<div data-id="contenidoUsuario" class="container contUser">
	<h1 class="tituloMis"> Mis Películas</h1>
	<p id="añadirMsgPelis"></p>
	<div class="tabbable" id="ocultaPelis">
		<ul class="nav nav-tabs estilosPestanas">
			<li class="active">
				<a href="#tab1" data-toggle="tab">Todas</a>
			</li>
			<li>
				<a href="#tab2" data-toggle="tab">Pendientes</a>
			</li>
			<li>
				<a href="#tab3" data-toggle="tab">Siguiendo</a>
			</li>
			<li>
				<a href="#tab4" data-toggle="tab">Finalizadas</a>
			</li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane active" id="tab1">
				<p data-bind="visible: getPelis(getListaUsuario()).length == 0">No hay películas seleccionadas</p>
				<table class="table table-striped table-bordered tablaUsu2" id="tablaPelis1" data-bind="visible: getPelis(getListaUsuario()).length > 0">
					<p data-bind="visible: getPelis(getListaUsuario()).length > 0">Hay en tu colección <span data-bind="text: getPelis(getListaUsuario()).length"></span> peliculas, has finalizado <span data-bind="text:cuantasHay('pelicula','Finalizado')" ></span>, 
						estas siguiendo <span data-bind="text:cuantasHay('pelicula','Siguiendo')" ></span> y tienes pendientes <span data-bind="text:cuantasHay('pelicula','Pendiente')" ></span></p>
					
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">

						<!-- ko if:categoria == 'pelicula' -->
						<tr data-bind="attr: {class: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>
			</div>
			<div class="tab-pane" id="tab2">
				<p data-bind="visible: cuantasHay('pelicula','Pendiente') == 0">No hay películas pendientes</p>
				<table class="table table-striped table-bordered tablaUsu2" data-id="tablaUsuario" data-bind="visible: cuantasHay('pelicula','Pendiente') > 0">
					<p data-bind="visible: cuantasHay('pelicula','Pendiente') > 0">Tienes pendientes <span data-bind="text:cuantasHay('pelicula','Pendiente')" ></span> peliculas</p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">

						<!-- ko if:categoria == 'pelicula' && estado2()=='Pendiente'-->
						<tr data-bind="attr: {class: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->

					</tbody>
				</table>
			</div>
			<div class="tab-pane" id="tab3">
				<p data-bind="visible: cuantasHay('pelicula','Siguiendo') == 0">No hay películas siguiendo</p>
				<table class="table table-striped table-bordered tablaUsu2" data-id="tablaUsuario" data-bind="visible: cuantasHay('pelicula','Siguiendo') > 0">
					<p data-bind="visible: cuantasHay('pelicula','Siguiendo') > 0">Estas siguiendo <span data-bind="text:cuantasHay('pelicula','Siguiendo')" ></span> peliculas</p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">

						<!-- ko if:categoria == 'pelicula' && estado2()=='Siguiendo'-->
						<tr data-bind="attr: {class: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->

					</tbody>
				</table>
			</div>
			<div class="tab-pane" id="tab4">
				<p data-bind="visible: cuantasHay('pelicula','Finalizado') == 0">No hay películas finalizadas</p>
				<table class="table table-striped table-bordered tablaUsu2" data-id="tablaUsuario" data-bind="visible: cuantasHay('pelicula','Finalizado') > 0">
					<p data-bind="visible: cuantasHay('pelicula','Finalizado') > 0">Has finalizado <span data-bind="text:cuantasHay('pelicula','Finalizado')" ></span> peliculas</p>
					<thead class="cabeceraUsu">
						<th class="not"> Título</th>
						<th> Género </th>
						<th> Año </th>
						<th> Estado </th>

					</thead>
					<tbody class="cuerpoUsu" data-bind="foreach: getListaUsuario()">

						<!-- ko if:categoria == 'pelicula' && estado2()=='Finalizado'-->
						<tr data-bind="attr: {class: idItem}">
							<td class="not"><a data-bind="attr: {href: '#/plantilla?id='+idItem}"><span data-bind="text: titulo"> </span></a></td>
							<td><span data-bind="text: genero"> </span></td>
							<td><span data-bind="text: anio"> </span></td>
							<td>
							<div class="btn-group">
								<a class="btn dropdown-toggle" data-toggle="dropdown" title="estado" href="#"><i class="icon-eye-open"></i></a>
								<ul class="dropdown-menu">
									<li class="separacion3">
										<a class="vista2" value="Finalizado" data-bind="click: function(){actualizarEstado('Finalizado')}">Finalizado</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Siguiendo" data-bind="click: function(){actualizarEstado('Siguiendo')}">Siguiendo</a>
									</li>
									<li class="separacion3">
										<a class="vista2" value="Pendiente" data-bind="click: function(){actualizarEstado('Pendiente')}">Pendiente</a>
									</li>
								</ul>
							</div> &nbsp;&nbsp;&nbsp;&nbsp; <span data-bind="text: estado2"> </span></td>
						</tr>
						<!-- /ko -->

					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>